﻿{{ extend './layout/main.html'}}

{{block 'content'}}
<style type="text/css">
    #box {
        /*background-color: rgba(0, 0, 0, 0.2);*/
        width: 300px;
        height: 360px;
        margin-top: 10px;
        overflow: hidden;
        padding: 0;
    }

    #box p {
        padding: 0 15px;
    }

    #lrc {
        margin-top: 100px;
        position: absolute;
        text-align: center;
        padding-top: 60px;
        padding-left: 50px;
    }

    .gl {
        color: white;
        background-color: pink;
    }
</style>

<div class="container">
    <div class="page-header">
        <h1>首页--<small>我的音乐</small></h1>
    </div>
    <a href="/music/add" class="btn btn-success">添加音乐</a>
</div>
<div class="container">
    <div class="row" style="display: flex;">
        <div style="flex: 3; margin-right: 10px;">
            <table class="table table-striped table-hover">
                <thead>
                <th>歌曲标题</th>
                <th>歌手</th>
                <th>时长</th>
                <th>编辑</th>
                <th>删除</th>
                <th>播放</th>
                </thead>
                <tbody class="list_container" id="list_container">
                {{each musics}}
                <tr>
                    <td>{{$value.title}}</td>
                    <td>{{$value.singer}}</td>
                    <td>{{$value.time}}</td>
                    <td><a href="/music/edit?id={{$value.id}}">编辑</a></td>
                    <td><a href="javascript:;" onclick="delMusic({{$value.id}},{{$value.uid}})" class="del">删除</a>
                    </td>
                    <td><span style="cursor:pointer"
                              file="{{$value.file}}"
                              lrc="{{$value.lrc}}"
                              class="glyphicon glyphicon-play-circle ply"></span></td>
                </tr>
                {{/each}}
                </tbody>
            </table>
        </div>
        <div style="flex: 2">
            <p>正在播放音乐:</p>
            <audio id="audio" autoplay src="" controls="controls"></audio>
            <div id="box" class="col-md-3">
                <div id="lrc"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    /*
        1:获取歌词
        2:转换成对象
        3:生成DOM，并留下时间属性作为查找元素的依据
        4:找到当前播放的p
        5:计算p与歌词盒子的高度差
        6:歌词盒子滚起来
     */

    // 转换对象
    function parseText(str) {
        var obj = {};
        // [00:23.65]塞纳河畔 左岸的咖啡
        // [00:23.65]你手一杯 我看得好累
        // 正则: /\[(\d{2})\:(\d{2})\.(\d{2})\](.*)/

        // 以换行符切割字符串，//  \r:mac || \n:linux || windows:\r\n
        var lines = str.split('\n');
        // 遍历该数组，以正则来匹配数据, 其中获取到时间和歌词
        var regex = /\[(\d{2})\:(\d{2})\.(\d{2})\](.*)/;
        // 循环
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i];
            var result = regex.exec(line);
            // 如果匹配失败，result = null
            if (!result) continue; // 不匹配的跳过
            var minute = result[1];
            var second = result[2];
            // 毫秒也可以做秒的四舍五入操作
            // 计算时间作为key，将其与歌词为对象添加属性
            var content = result[4];
            var time = (minute * 60) + (second - 0);
            obj[time] = content;
        }
        return obj;
    }

    // 生成DOM
    function createDOM(obj) {
        var $lrc = $('#lrc');
        var htmlText = '';
        // 遍历对象
        for (var time in obj) {
            htmlText += '<p time=' + time + '>' + obj[time] + '</p>'
        }
        // 生成DOM
        $lrc.html(htmlText);
    }

    // scroll 滚动
    function scroll(obj) {
        // 获取播放的事件
        $('#audio').on('timeupdate', function (e) {
            var $lrc = $('#lrc');
            // 获取当前播放时间,需要用原生DOM对象的currentTime属性，audio的timeupdate事件: 获取e.target.currentTime
            var currentTime = Math.round(e.target.currentTime);
            // 获取来的是秒

            // 查找当前的一堆p中是否有这个元素
            // 别去DOM找了,对比对象是否有这个key就行了
            if (!obj[currentTime]) return;

            // 一定有这句歌
            var p = $lrc.find('p[time=' + currentTime + ']');

            // 获取p标签的top
            // console.log(p.offset().top);
            // 求歌词盒子与p的top差，把p标签的top值- lrc的top值
            var minus = $lrc.offset().top - p.offset().top;

            // 移动lrc盒子，将上一步的差值作为lrc向上移动的距离
            $lrc.animate({top: minus}, 'slow');

            // 歌词设置高亮，给这个p标签加样式，并移除其他元素的样式
            p.addClass('gl').siblings().removeClass('gl');
        });
    }

    $('.ply').on('click', function () {
        // 歌词,歌曲数据
        var file = $(this).attr('file');
        var lrc = $(this).attr('lrc');

        // 获取歌词文件，由于是歌词，不要加typeType:'json'
        $.ajax({
            url: lrc,
            type: 'get',
            success: function (text) {
                // 解析成对象
                var obj = parseText(text);
                // 生成DOM
                createDOM(obj);
                // 开始滚动
                scroll(obj);
            }
        });
        // 播放音乐
        $('#audio').attr('src', file);
    });

    // 删除
    function delMusic(id, uid) {
        if (confirm('确认删除?')) {
            $.ajax({
                url: '/music/delMusic',
                type: 'DELETE',
                data: {id: id, uid: uid},
                success: function (data) {
                    alert(data.message);
                    location.reload();
                }
            });
        }
    }
</script>


{{/block}}